<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery.js"></script>
    <title>Document</title>
</head>

<body>
    <div style="text-align: center;">
        <h1>登录</h1>
        ⽤户：<input id="username" type="text"><br>
        密码：<input id="password" type="password"><br>
        <input type="button" value=" 提交 " onclick="mysub()" style="margin-top: 20px;margin-left: 50px;">
    </div>
    
    <script>

        // 注意ajax是依赖于jQuery 所以我们需要创建一个js包 用来存储jQuery
        // 浏览器搜索 jQuery cnd加速    先复制到浏览器看看能不能用 再复制到idea
        // ajax格式 提交
        function mysub(){
            // 判空
            let username = jQuery('#username');
            let password = jQuery('#password');
            // jQuery.trim 去空格
            if(jQuery.trim(username.val()) == ''){
                alert("请输入用户名！");
                return;
            }
            if(jQuery.trim(password.val()) == ''){
                alert("请输入密码！");
                return;
            }
            jQuery.ajax({
                // 请求使用方法
                type: "POST",
                //  映射方法路径
                url: 'log/login',
                // 请求正文
                data: {"username": username.val(),"password": password.val()},
                // 除了 服务器范湖的结果
                // contentType: 'application/x-www-form-urlencoded',
                success: function(result){
                    alert(JSON.stringify(result));
                }
            });
        }
    </script>
</body>

</html>
